<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">

    </ex_super_table_page>

    <ex_super_dialog_form ref="detailDialog" v-bind="detail_dialog">
    </ex_super_dialog_form>
  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';

import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'platformSync>handover_file_manage'

export default {
  title: 'label_handover_file_manage',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {
      status: "",
      createTimeFrom: null,
      createTimeTo: null,
      selection: [],
      option: {
        search: {
          model: [
            { key: 'orderType', label: 'label_platform', type: "select", enum: 'SrmOrderTypeEnum' },

            { key: 'postingNumber', label: 'label_platform_code', },

            { key: 'fileNumber', label: 'label_platform_file_code', },
            { key: 'clientId', label: 'label_platform_store', },
            {
              label: "label_create_time", key: 'startCreateTime', type: 'date-picker',
              placeholder: "label_create_start_time", attrs: { type: 'datetime' },
              on: { change: (e) => this.createTimeFrom = e },
              pickerOptions: {
                disabledDate: (date) => {
                  if (this.createTimeTo) {
                    return this.createTimeTo < date.getTime()
                  }
                  return false
                }
              }

            },
            {
              label: "~", key: 'endCreateTime', type: 'date-picker',
              placeholder: "label_create_end_time", attrs: { type: 'datetime' },
              on: { change: (e) => this.createTimeTo = e },
              'pickerOptions': {
                disabledDate: (date) => {
                  if (this.createTimeFrom) {
                    return this.createTimeFrom > date.getTime()
                  }
                  return false
                }
              }
            },

          ],
        },


        table: {
          url: "/srm-api/ozon/OzonOrderDeliveryReceiptClientRpc/selectListPage.json",

          model: this.init_table_model(),
        },
      },
      detail_dialog: {
        customClass: 'dialog_big',
        detailUrl: "/srm-api/ozon/OzonOrderDeliveryReceiptClientRpc/detail.json",
        detailDataHandle: (data) => {

          data.list = []
          if (!_.isEmpty(data.srmOzonOrderDTOs)) {
            data.list = _.flatMap(data.srmOzonOrderDTOs, order => {
              return _.isEmpty(order.orderProductList) ? [] : order.orderProductList.map(it => ({
                platformOrderCode: order.orderNumber,
                platformSkuCode: it.sku,
                skuBarcode: it.skuBarcode,
                skuCode: null,
                skuOnlyCode: it.skuOnlyCode,
                skuName: it.skuNameCn,
                skuNameEn: it.skuNameEn,
                skuCount: it.quantity,
              }))
            })
          } else if (!_.isEmpty(data.srmWbOrderDTOS)) {
            data.list = _.flatMap(data.srmWbOrderDTOS, order => {
              return _.isEmpty(order.productList) ? [] : order.productList.map(it => ({
                platformOrderCode: order.wbId,
                platformSkuCode: it.sku,
                skuBarcode: it.skuBarcode,
                skuCode: null,
                skuOnlyCode: it.skuOnlyCode,
                skuName: it.skuNameCn,
                skuNameEn: it.skuNameEn,
                skuCount: it.quantity,
              }))
            })
          }
          return data
        },
        form: {
          // itemClass: "form_item_default",
          inputClass: "bold",
          // formClass: "form_default_col2 flex_row_wrap",
          model: [
            { header: "label_base_info", },
            {
              grid: [[
                {
                  span: 8,
                  col: {
                    key: 'orderType', label: 'label_platform', formType: "text",
                    formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
                  },
                },
                {
                  span: 8,
                  col: { key: 'fileNumber', label: 'label_platform_file_code', formType: "text", },
                },
                {
                  span: 8,
                  col: { key: 'clientId', label: 'label_platform_store', formType: "text", },
                },
              ],
              [
                {
                  span: 8,
                  col: {
                    key: 'fileName', label: 'label_file_name', render: (h, { data }) => {
                      if (!data.filePath) return
                      return (<a class="a_file_link" target="_blank" href={this.$ex_default_download_url + data.filePath}
                        download={data.fileName}><i class="el-icon-download el-icon--left" />{data.fileName}</a>)
                    }
                  },
                },
                {
                  span: 8,
                  col: {
                    key: 'gmtCreate', label: 'label_create_time', formType: "text",
                    formatter: (r, c, v, i) => this.$dateFormat(v)
                  },
                },
                {
                  span: 8,
                  col: {
                    key: 'orderCount', label: 'label_order_count', formType: "text",
                  },
                },
              ]
              ],
            },

            { key: 'remark', label: 'label_remark', formType: "text", },

            {
              key: 'list', formType: "itemTable",
              height: 400,
              model: [
                {
                  key: 'platformOrderCode', label: 'label_platform_code', 'min-width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },
                {
                  key: 'platformSkuCode', label: 'label_platform_product_code', 'min-width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },


                {
                  key: 'skuBarcode', label: 'label_sku_code', 'width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },
                // { key: 'skuCode', label: 'label_sku_code_cn', 'width': 120, 'show-overflow-tooltip': true, },
                {
                  key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },

                {
                  key: 'skuName', label: 'label_sku_name', 'min-width': 130, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },
                {
                  key: 'skuNameEn', label: 'label_sku_name_en', 'width': 130, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },
                { key: 'skuCount', label: 'label_count', 'width': 100, },

              ],
            },
            // {
            //   key: 'postingNumberList', label: '平台订单号列表',
            //   render: (h, { data }) => {
            //     if (_.isEmpty(data.postingNumberList)) return
            //     return (<div>
            //       {data.postingNumberList.map(it => {
            //         return <div>{it}</div>
            //       })}
            //     </div>)
            //   }
            // },
          ],
        }
      },
    };
  },
  methods: {
    option_table_model() {
      return [
        // { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        {
          key: 'orderType', label: 'label_platform', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
        },
        { key: 'fileNumber', label: 'label_platform_file_code', 'min-width': 140, },
        // { key: 'postingNumberList', label: 'label_platform_code', 'min-width': 140, },

        {
          key: 'orderCount', label: 'label_order_count', 'width': 110,
          // formatter: (r, c, v, i) => v ? v.length : 0
        },
        { key: 'clientId', label: 'label_platform_store', 'width': 140, 'show-overflow-tooltip': true, },

        {
          key: 'fileName', label: 'label_file_name', 'width': 130, render: (h, { row }) => {
            if (!row.filePath) return
            return (<a class="a_file_link" target="_blank" href={this.$ex_default_download_url + row.filePath}
              download={row.fileName}><i class="el-icon-download el-icon--left" />{row.fileName}</a>)
          }
        },
        { key: 'gmtCreate', label: 'label_create_time', width: 140, formatter: (r, c, v, i) => this.$dateFormat(v) },
        { key: 'remark', label: 'label_remark', 'width': 130, 'show-overflow-tooltip': true, },
        {
          type: 'operate', width: 200,
          fixed: 'right',
          operate: [

            {
              label: 'label_view_detail', click: (row) => {
                this.$refs.detailDialog.showNew({
                  title: this.$tt('label_handover_file_detail'),
                  // data: row,
                  params: { id: row.id },
                  // onlySetData: true,
                })
              }
            },

          ]
        }
        // { key: 'postingNumberList', label: '订单号列表', 'width': 110, 'show-overflow-tooltip': true, },
      ]
    },



  }
};

</script>
<style></style>
